<template>
  <div class="waper_page" style="padding: 20px;">
    <div class="aside1List">
      <div class="asideLeft">
        <AsideBox :asideList="asideList" :itemAside="itemAside" @handleAside="handleAside"></AsideBox>
      </div>
      <div class="listCenter">
        <ListBox :dataList="dataList" :className="className" :itemList="itemList" @handleGoto="handleGoto"></ListBox>
      </div>
    </div>
  </div>
</template>

<script>
import AsideBox from '@/components/Widgets/asideBox'
import ListBox from '@/components/Widgets/listBox'
export default {
  components: {AsideBox,ListBox},
  props: {},
  data () {
    return {
      // 侧边栏数据
      asideList:[],
      itemAside:{},
      // 列表数据
      dataList:[],
      itemList:{},
      className:'listImg5',// 6列：listImg6 5列：listImg5 4列：listImg4
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.getAsideList();
  },
  updated () {},
  methods: {
    // 获取侧边栏数据
    getAsideList(){
      this.asideList = [
        {title:'喜剧',code:'1210'},
        {title:'科幻',code:'1211'},
        {title:'动作',code:'1212'},
        {title:'爱情',code:'1213'},
        {title:'动画',code:'1214'},
        {title:'军旅抗战',code:'1310'},
        {title:'军旅抗战',code:'1310'},
        {title:'军旅抗战',code:'1310'},
        {title:'军旅抗战',code:'1310'},
        {title:'军旅抗战',code:'1310'},
        {title:'军旅抗战',code:'1310'},
        {title:'军旅抗战',code:'1310'},
        {title:'军旅抗战',code:'1310'},
      ]
      
      this.itemAside = this.asideList.length>0 ? this.asideList[0] : {};
      this.getListData();
    },
    // 获取列表数据
    getListData(){
      let listData = [
        { asideTitle:'喜剧',asideCode:'1210',
          data:[
            {title:'哥，你好',code:'111011',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'平凡英雄',code:'111012',imgUrl:require('@/assets/img/r-2.jpg')},
            {title:'独行月球',code:'111013',imgUrl:require('@/assets/img/r-3.jpg')},
            {title:'阴阳画皮年少好滴哦好等哈搜狐都爱',code:'111014',imgUrl:require('@/assets/img/r-4.jpg')},
            {title:'一周的朋友',code:'111015',imgUrl:require('@/assets/img/r-5.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
          ]
        },
        { asideTitle:'科幻',asideCode:'1211',
          data:[
            {title:'爱的二八定律',code:'111111',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'我们的当打之年',code:'111112',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'你是我的荣耀',code:'111113',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'谢谢你医生',code:'111114',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'良辰美景好时光',code:'111115',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'陈情令',code:'111116',imgUrl:require('@/assets/img/r-1.jpg')},
          ]
        },
        { asideTitle:'动作',asideCode:'1212',
          data:[]
        },
        { asideTitle:'爱情',asideCode:'1213',
          data:[
            {title:'哥，你好',code:'111011',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'平凡英雄',code:'111012',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'独行月球',code:'111013',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'阴阳画皮',code:'111014',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'一周的朋友',code:'111015',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-1.jpg')},
          ]
        },
        { asideTitle:'动画',asideCode:'1214',
          data:[
            {title:'喜剧',code:'1210',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'科幻',code:'1211',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'动作',code:'1212',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'爱情',code:'1213',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'动画',code:'1214',imgUrl:require('@/assets/img/r-1.jpg')},
          ]
        },
        { asideTitle:'军旅抗战',asideCode:'1310',
          data:[
            {title:'军旅抗战',code:'1310',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'古装历史',code:'1311',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'都市是生活',code:'1312',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'偶像爱情',code:'1313',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'青春校园',code:'1314',imgUrl:require('@/assets/img/r-1.jpg')},
          ]
        },
      ]
      
      listData.forEach(item =>{
        if(this.itemAside.code == item.asideCode){
          this.dataList = item.data;
        }
      })

      this.itemList = this.dataList.length>0 ? this.dataList[0] : {};
    },
     // 切换侧边栏分类
    handleAside(item){
      this.itemAside = item;
      this.getListData();
    },
    // 跳转
    handleGoto(data){
      console.log(data);
      this.itemList = data;
    }
  },
  filters: {},
}
</script>

<style lang="less" scoped>
.aside1List {
  width: 1280px;
  height: 720px;
  background: url('../../assets/images/bg1.png');
  padding: 20px;
  display: flex;
  flex-direction: row;
  .asideLeft{
    width: 260px;
    height: 100%;
  }
  .listCenter{
    width: calc(100% - 260px);
    height: 100%;
  }
  .btnRight{
    width: calc(100% - 330px - 715px);
    height: 100%;
    display: flex;
    flex-direction: column;
    .seach{
      height: 30px;
      color: #fff;
      margin: 15px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    .tatal{
      height: calc(100% - 130px);
    }
  }
}
</style>